<!-- 通用设置 -->
<template>
  <div class="commonSet">
    <van-nav-bar title="通用" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-cell :title="title" is-link @click="doClick" />
    <van-action-sheet
      v-model:show="show"
      title="请选择"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="doSelect"
    />
  </div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";
export default {
  name: "commonSet",
  setup() {
    const data = reactive({
      show: false,
      title: "主题模式",
    });
    const router = useRouter();
    const store = useStore();
    const { proxy } = getCurrentInstance();
    onBeforeMount(() => {});
    onMounted(() => {});
    const refData = toRefs(data);
    //跳转回去
    const onClickLeft = () => {
      router.push({ path: "/setting" });
    };
    //选项取消
    const onCancel = () => Toast("取消");
    const actions = [{ name: "浅色模式" }, { name: "深色模式" }];
    //点击显示选择
    const doClick = () => {
      data.show = true;
    };
    //点击选项
    const doSelect = (action, index) => {
      console.log(action, index);
      data.title = action.name;
      if (index == 0) {
        //浅色
        store.commit("changeTheme", "light");
        proxy.$storage._session.set("theme", "light");
      }
      if (index == 1) {
        //深色
        store.commit("changeTheme", "dark");
        proxy.$storage._session.set("theme", "dark");
      }
    };
    return {
      ...refData,
      onClickLeft,
      onCancel,
      actions,
      doClick,
      doSelect,
    };
  },
};
</script>
<style scoped lang="scss">
.commonSet {
  background-color: #f5f4f9;
  height: 100vh;
}
</style>
